'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ListView,
    RefreshControl,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import ScrollableTabView, {
    DefaultTabBar,
    ScrollableTabBar
} from 'react-native-scrollable-tab-view';
import Toast from '../Utils/toast';
import WithTogether from '../Pages/WithTogetherDetails';
import ImageViewer from '../Pages/ImageViewer';
import UserAPIService from "../Commom/UserAPIService";
export default class MyDatingPartnerPage extends Component {
    constructor(props) {
        super(props);
        var releaseData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var joinData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            releaseDataSource: releaseData,
            joinDataSource: joinData,
            isRefreshing: false,
            release_record_count: 1,
            release_page: 1,
            release_data: [],
            join_record_count: 1,
            join_page: 1,
            join_data: [],
        }
        ;
    }

    componentDidMount() {
        UserAPIService.datingPartnerList(Global.Const.token, Global.Const.registeredId, '0', 1).then((ret)=> {
            this.setState({
                release_data: ret.result,
                releaseDataSource: this.state.releaseDataSource.cloneWithRows(ret.result),
                release_record_count: ret.record_count,
                release_page: Number(ret.page),
            });
        }).catch((err)=> {

        });
        UserAPIService.datingPartnerList(Global.Const.token, Global.Const.registeredId, '1', 1).then((ret)=> {
            this.setState({
                join_data: ret.result,
                joinDataSource: this.state.joinDataSource.cloneWithRows(ret.result),
                join_record_count: ret.record_count,
                join_page: Number(ret.page),
            });
        }).catch((err)=> {

        });
    }

    BackAction() {
        this.props.navigator.pop();
    }

    goToWithTogetherDetailPage(row) {
        this.props.navigator.push({
            name: 'WithTogetherDetail',
            component: WithTogether,
            passProps: {
                ID: row.id
            }
        });
    }

    goToImageViewer(images) {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: images,
            }
        })
    }

    //刷新数据
    onRefreshReleaseData() {
        this.setState({
            isRefreshing: true,
        });
        UserAPIService.datingPartnerList(Global.Const.token, Global.Const.registeredId, '0', 1).then((ret)=> {
            this.setState({
                isRefreshing: false,
                release_data: ret.result,
                releaseDataSource: this.state.releaseDataSource.cloneWithRows(ret.result),
                release_record_count: ret.record_count,
                release_page: Number(ret.page),
            });
            Toast.show('刷新成功');
        }).catch((err)=> {
            this.setState({
                isRefreshing: false,
            });
        });
    }

    //刷新数据
    onRefreshJoinData() {
        this.setState({
            isRefreshing: true,
        });
        UserAPIService.datingPartnerList(Global.Const.token, Global.Const.registeredId, '1', 1).then((ret)=> {
            this.setState({
                isRefreshing: false,
                join_data: ret.result,
                joinDataSource: this.state.joinDataSource.cloneWithRows(ret.result),
                join_record_count: ret.record_count,
                join_page: Number(ret.page),
            });
            Toast.show('刷新成功');
        }).catch((err)=> {
            this.setState({
                isRefreshing: false,
            });
        });
    }

    //加载更多数据
    loadMoreReleaseData() {
        if (this.state.release_page < this.state.release_record_count) {
            this.setState({
                isRefreshing: true,
            });
            UserAPIService.datingPartnerList(Global.Const.token, Global.Const.registeredId, '0', this.state.release_page + 1).then((ret)=> {
                let wanjian = [];
                wanjian = this.state.release_data;
                for (var i = 0; i < ret.result.length; i++) {
                    wanjian.push(ret.result[i])
                }
                this.setState({
                    isRefreshing: false,
                    release_data: wanjian,
                    releaseDataSource: this.state.releaseDataSource.cloneWithRows(wanjian),
                    release_record_count: ret.record_count,
                    release_page: Number(ret.page),
                });
                Toast.show('刷新成功');
            }).catch((err)=> {
                this.setState({
                    isRefreshing: false,
                });
            });
        } else {
            if (this.state.release_page != 1) {
                Toast.show('木有更多数据');
            }
            this.setState({
                isRefreshing: false,
            });
        }
    }

    //加载更多数据
    loadMoreJoinData() {
        if (this.state.join_page < this.state.join_record_count) {
            this.setState({
                isRefreshing: true,
            });
            UserAPIService.datingPartnerList(Global.Const.token, Global.Const.registeredId, '1', this.state.join_page + 1).then((ret)=> {
                let wanjian = [];
                wanjian = this.state.join_data;
                for (var i = 0; i < ret.result.length; i++) {
                    wanjian.push(ret.result[i])
                }
                this.setState({
                    isRefreshing: false,
                    join_data: wanjian,
                    joinDataSource: this.state.joinDataSource.cloneWithRows(wanjian),
                    join_record_count: ret.record_count,
                    join_page: Number(ret.page),
                });
                Toast.show('刷新成功');
            }).catch((err)=> {
                this.setState({
                    isRefreshing: false,
                });
            });
        } else {
            if (this.state.join_page != 1) {
                Toast.show('木有更多数据');
            }
            this.setState({
                isRefreshing: false,
            });
        }
    }

    releaseListRow(rowData, sectionID, rowID) {
        var image = rowData.images;
        return (
            <TouchableOpacity onPress={() => this.goToWithTogetherDetailPage(rowData)}>
                <View style={{backgroundColor:'white'}}>
                    <View
                        style={{backgroundColor:'white'}}>
                        <Text
                            style={{marginRight:10,marginLeft:10,marginTop:10,color:Global.FontColor.DimGray,fontSize:16}}>{rowData.content}</Text>
                    </View>
                    {image.length > 0 ? <View
                        style={{marginTop:15,marginLeft:10,marginRight:10,flexDirection: 'row',flexWrap:'wrap',alignItems:'center'}}>
                        {image.map((item, index) => {
                            return (

                                <View key={'image' + index}
                                      style={{alignItems: 'center', width:( Global.Const.size.width-20) / 4, height: ( Global.Const.size.width-20) / 4}}>
                                    <TouchableOpacity activeOpacity={0.2}
                                                      key={'row' + (rowID + index)}
                                                      onPress={() => this.goToImageViewer(image)}>

                                        <Image
                                            style={{width: ( Global.Const.size.width-20) / 4-8, height: ( Global.Const.size.width-20) / 4-8}}
                                            source={{uri:item}}/>
                                    </TouchableOpacity>

                                </View>
                            )
                        })}
                    </View> : <View style={{width:Global.Const.size.width,height:15}}></View>}

                    <View
                        style={{flexDirection:'row',width:Global.Const.size.width,height:30,justifyContent:'space-between'}}>
                        <Text style={{marginLeft:10,color:Global.FontColor.DarkGray,fontSize:12}}>截止有效时间</Text>
                        <Text style={{marginRight:15,fontSize:12,color:Global.FontColor.DarkGray}}>{rowData.time}</Text>
                    </View>
                    <View style={{width:Global.Const.watch,height:15,backgroundColor:Global.Const.transparent}}></View>
                </View>
            </TouchableOpacity>
        );
    }

    joinListRow(rowData, sectionID, rowID) {
        var image = rowData.images;
        return (
            <TouchableOpacity onPress={() => this.goToWithTogetherDetailPage(rowData)}>
                <View style={{backgroundColor:'white'}}>
                    <View
                        style={{backgroundColor:'white'}}>
                        <Text
                            style={{marginRight:10,marginLeft:10,marginTop:10,color:Global.FontColor.DimGray,fontSize:16}}>{rowData.content}</Text>
                    </View>
                    {image.length > 1 ? <View
                        style={{marginTop:15,marginLeft:10,marginRight:10,flexDirection: 'row',flexWrap:'wrap',alignItems:'center'}}>
                        {image.map((item, index) => {
                            return (

                                <View key={'image' + index}
                                      style={{alignItems: 'center', width:( Global.Const.size.width-20) / 4, height: ( Global.Const.size.width-20) / 4}}>
                                    <TouchableOpacity activeOpacity={0.2}
                                                      key={'row' + (rowID + index)}
                                                      onPress={() => this.goToImageViewer(image)}>
                                        <Image
                                            style={{width: ( Global.Const.size.width-20) / 4-8, height: ( Global.Const.size.width-20) / 4-8}}
                                            source={{uri:item}}/>
                                    </TouchableOpacity>

                                </View>
                            )
                        })}
                    </View> : <View style={{width:Global.Const.size.width,height:15}}></View>}

                    <View
                        style={{marginTop:5,flexDirection:'row',width:Global.Const.size.width,height:30,justifyContent:'space-between',marginBottom:3}}>
                        <View style={{flexDirection:'row',marginLeft:10}}>
                            <Image style={{width:24,height:24,borderRadius:12}}
                                   source={{uri:rowData.avatar}}></Image>
                            <Text
                                style={{marginLeft:10,fontSize:14,color:Global.FontColor.DimGray}}>{rowData.name}</Text>
                        </View>
                        <Text style={{marginRight:15,fontSize:12,color:Global.FontColor.DarkGray}}>{rowData.time}</Text>
                    </View>
                    <View style={{width:Global.Const.watch,height:15,backgroundColor:Global.Const.transparent}}></View>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        console.log('data', this.state.release_data);
        return (
            <View style={styles.container}>
                <View
                    style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                    <View style={{marginTop:24,alignItems:'center'}}>

                        <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.BackAction()}>
                                <Image style={{resizeMode:'contain',width:21,height:21}}
                                       source={require('../../Image/icon_back.png')}></Image>
                            </TouchableOpacity>
                        </View>
                        <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>我的约伴</Text>
                    </View>
                </View>
                <View
                    style={{backgroundColor:Global.Const.transparent,flex:1,borderTopWidth:2,borderColor:Global.Const.transparent}}>
                    <ScrollableTabView
                        renderTabBar={
                            () => <DefaultTabBar
                            textStyle={{ fontSize: 15,marginTop: 8}}
                            style={{height:40,borderBottomColor: '#F5F5F5',backgroundColor:'white'}}/>}
                        tabBarUnderlineStyle={{backgroundColor: '#24CD78',height:3}}
                        tabBarUnderlineColor={'#FF0000'}
                        tabBarActiveTextColor={'#24CD78'}
                        tabBarInactiveTextColor={'#333333'}
                        tabBarPosition='top'>
                        <View tabLabel="发布的约伴">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshReleaseData()}}
                                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                initialListSize={1}
                                onEndReached={() => {this.loadMoreReleaseData()}}
                                enableEmptySections={true}
                                dataSource={this.state.releaseDataSource}
                                renderRow={this.releaseListRow.bind(this)}/>

                        </View>
                        <View tabLabel="参与的约伴">
                            <ListView
                                style={{height:Global.Const.size.height-105}}
                                refreshControl={
                                          <RefreshControl
                                            refreshing={this.state.isRefreshing}
                                            onRefresh={() => {this.onRefreshJoinData()}}
                                           colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                                            progressBackgroundColor="white"
                                          /> }
                                onEndReachedThreshold={50}
                                initialListSize={1}
                                onEndReached={() => {this.loadMoreJoinData()}}
                                enableEmptySections={true}
                                dataSource={this.state.joinDataSource}
                                renderRow={this.joinListRow.bind(this)}/>

                        </View>
                    </ScrollableTabView>
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});